<template>
  <div style="display: flex;flex-direction: column;background: white">
    <div class="title">
      <div style="display: flex;flex-direction: row">
    <span style="padding-left: 10px">
        {{title}}
      </span>
        <div v-if="newProduct"
             style="border-radius: 8px 8px 8px 0px;background:#E16A53;font-size: 11px;padding: 2px 6px 2px 5px;height: 10px;position: relative;top:-5px;left: 6px;color: white">
          NEW
        </div>
      </div>
    </div>
    <div class="product" v-for="product,index in productList"
         v-bind:key="index" style="padding: 6px 0px;padding-left: 10px">
      <div style="display: flex;flex-direction: row;" @click="onProductClick(product)">
        <div style="flex-direction: column;display: flex;text-align: left;flex: 1">
          <div><span style="font-size: 18px;color: #E16A53">{{product.rateRange}}</span></div>
          <span style="font-size: 12px;line-height: 12px;margin-top: 6px;color:#8A919C">{{product.rateStr}}</span>
        </div>
        <div style="flex-direction: column;display: flex;text-align: left;flex: 1.6;padding-top:0px">
          <span style="color: #42578E;font-size: 15px;">{{product.feature}}</span>
          <div class="features-list">
            <span v-for="(feature,index) in product.features"
                  :class="{'features-content-first': index==0,'features-content-center': index!=0&&index!=(product.features.length-1),'features-content-last':index == (product.features.length-1) }">{{feature}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'DepositItem',
    props: ['productList', 'title', 'newProduct'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    created () {
    },
    methods: {
      onProductClick: function (product) {
        if (product.type === 0) {
          this.$router.push({
            path: '/intelligentDepositDetail',
            query: {product: encodeURIComponent(JSON.stringify(product))}
          })
        } else if (product.type === 2) {
          this.$router.push({
            path: '/fixedDepositDetail',
            query: {product: encodeURIComponent(JSON.stringify(product))}
          })
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .title {
    color: #42578E;
    font-size: 16px;
    font-weight: bold;
    line-height: 14px;
    padding-top: 15px;
  }

  .title::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    position: relative;
  }

  .features-list {
    display: flex;
    flex-direction: row;
    color: #8A919C;
    font-size: 12px;
    margin-top: 8px;
  }

  .features-content-first {
    color: #E16A53;
    padding-right: 8px;
  }

  .features-content-first::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    top: 2px;
    left: 3.5px;
    background: #8A919C;
    position: relative;
  }

  .features-content-center {
    padding-right: 8px;
  }

  .features-content-center::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    top: 2px;
    left: 3.5px;
    background: #8A919C;
    position: relative;
  }

  .features-content-last {
    display: inline-block;
  }
</style>
